import React, {useState, useEffect} from 'react';
import {
  List,
  Button,
  InputItem,
  Toast,
  ActivityIndicator,
} from '@ant-design/react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {StyleSheet} from 'react-native';
import {formatDate} from '@/helpers/dateutil';
import {Table, Row, Rows} from 'react-native-table-component';
import NoninstructStore from './noninstructStore';
import {WhseManagementHomeRoute} from './routeDef';

const styles = StyleSheet.create({
  container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
  head: {height: 40, backgroundColor: '#f1f8ff'},
  text: {margin: 6},
  tableBorder: {borderWidth: 2, borderColor: '#c8e1ff'},
});

function ShipResultPage({navigation, route}) {
  const noninstructStore = NoninstructStore.useStore();
  const [shipOrderRes, setShipOrderRes] = useState({
    sooOrderNum: '',
    sooReceiveDate: null,
    sooReceiveName: '',
    amSendSubListDTO: [],
  });
  useEffect(() => {
    navigation.setOptions({
      headerLeft: null,
    });
  }, []);
  useEffect(() => {
    async function fetchShipResult() {
      if (route.params && route.params.from === 'NonInstruct') {
        const soiRes = await noninstructStore.getShipOrderInfo();
        console.log(soiRes);
        if (!soiRes.errorCode) {
          setShipOrderRes(soiRes.data || {amSendSubListDTO: []});
        } else {
          Toast.fail(soiRes.errorMsg);
        }
      }
    }
    fetchShipResult();
  }, [route.params, noninstructStore]);
  const tableHead = ['件号', '序号', '系统批次号', '数量', '到期日期', '架位'];
  const tableData = shipOrderRes.amSendSubListDTO.map((amss) => [
    amss.sorPn,
    amss.sorSn,
    amss.sorSysBatchNo,
    amss.sorSendCount,
    formatDate(amss.srExpireDate, 'YYYY-MM-DD'),
    amss.srFrameName,
  ]);
  const tableRowFlex = [4, 2, 3, 2, 2, 2];
  return (
    <>
      <ActivityIndicator
        text="发料单获取中..."
        size="large"
        animating={noninstructStore.getShipOrderInfo.loading}
      />
      <ScrollView>
        <List>
          <InputItem labelNumber={5} value={shipOrderRes.sooOrderNum}>
            发料单号:
          </InputItem>
          <InputItem labelNumber={5} value={shipOrderRes.sooReceiveName}>
            领料人:
          </InputItem>
          <InputItem
            labelNumber={5}
            value={
              shipOrderRes.sooReceiveDate
                ? dayjs(shipOrderRes.sooReceiveDate).format(
                    'YYYY-MM-DD HH:mm:ss',
                  )
                : ''
            }>
            领料时间:
          </InputItem>
          <List.Item>
            <Table borderStyle={styles.tableBorder}>
              <Row
                data={tableHead}
                style={styles.head}
                textStyle={styles.text}
                flexArr={tableRowFlex}
              />
              <Rows
                data={tableData}
                flexArr={tableRowFlex}
                textStyle={styles.text}
              />
            </Table>
          </List.Item>
        </List>
      </ScrollView>
      <Button
        type="primary"
        onPress={() => {
          navigation.navigate(WhseManagementHomeRoute);
        }}>
        返回库房首页
      </Button>
    </>
  );
}

ShipResultPage.routeName = 'ShipResultPage';
export default ShipResultPage;
